<template>
    <div class="login_05">
        <h2>{{globalTitle}}</h2>

        <div class="card">
            <img src="./login-left.jpg"/>
            <div class="right">
                <div class="bar">
                    <div @click="barHandel(index)" class="bar-item" v-for="(item, index) in bars" :class="current_bar === index && 'bar-active'">{{item}}</div>
                </div>

                <login_form v-if="current_bar === 0"/>
                <regis_form v-else/>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import login_form from './login_form.vue'
import regis_form from './regis_form.vue'
import {ref} from 'vue'
import {useLoginFunctions} from "/@components/hzsystem/LoginPublicFuncation";
const { globalTitle} = useLoginFunctions();

const bars = ref(['账号登录', '注册新用户'])
const current_bar = ref(0)

const barHandel = (index: number) => {
    current_bar.value = index;

}
</script>

<style scoped lang="scss">
.login_05{
    width: 100vw;
    height: 100vh;
    background-image: url('./login-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h2{
        color: #3FB5E3;
    }

    .card{
        width: 1000px;
        height: 368px;
        background: #fff;
        overflow: hidden;
        display: flex;
        border-radius: 1.2rem;
        img{
            width: 580px;
        }

        .right{
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            .bar{
                display: flex;
                align-items: center;
                .bar-item{
                    color: #333333;
                    margin-right: 20px;
                    position: relative;
                    cursor: pointer;
                }
                .bar-active{
                    color: #198cff;
                    &:before{
                        content: '';
                        display: block;
                        position: absolute;
                        width: 100%;
                        height: 2px;
                        background: #198cff;
                        bottom: -5px;
                    }
                }
            }
        }
    }
}
</style>

<style>
.el-input__inner{
    color:  #333333 !important;
}
</style>